<template>
  <div class="app-container">
    <el-row class="library-row">
      <el-col :span="4">
        <el-select v-model="form.category_id" @change="changeCategory" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.category_id"
            :label="item.category_name"
            :value="item.category_id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4" :offset="2">
        <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchBooks"></el-button>
        </el-input>
      </el-col>
      <el-col :span="3" :offset="11" class="add">
        <el-button @click="addBooks" type="primary" icon="el-icon-plus">添加图书</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%">
       <template slot="empty">
	    暂无数据
    </template>

      <el-table-column label="#" width="50">
        <template slot-scope="scope">{{(form.page - 1) * form.page_size + scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column prop="title" label="图书名"></el-table-column>
      <el-table-column prop="author" label="作者" width="200"></el-table-column>
      <el-table-column prop="publisher" label="出版社" width="300"></el-table-column>
      <el-table-column prop="city" label="分类" width="200"></el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">评论</el-button>
          <el-button type="text" size="small" @click="editor(scope.row)">编辑</el-button>
          <el-button  @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="total">
      <el-pagination
        @current-change="currentPage"
        background
        :page-size="20"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-row>
    <!-- 弹窗 -->
    <el-dialog :title="title" :close-on-click-modal="false"  :visible.sync="dialogFormVisible">
      <compile ref="addData" @saveData="saveData" @saveDataEditor="saveDataEditor" :option="options" :title="title"  :formData="formData" :isEdit="isEdit"></compile>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Compile from "@/components/child/compile";
import { getList, delList,addForm,editorForm,addFormEditor} from "@/api/library";

export default {
  components: {
    Compile,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      title:'添加图书',
      search: "",
      total: 1,
      isEdit:false,
      form: {
        category_id: null,
        page: 1,
        page_size: 20,
        book: "",
        sort: "",
      },
      formData:{
        category_id:null,
        path:'',
        cover:'',
        title:'',
        author:'',
        publisher:'',
        isbn:'',
        pages:null,
        description:'',
        recommended:0,
        open_resources:0,
        filesize:0
      },
      file_id: null,
      dialogFormVisible: false, //新增弹窗
      list: null,
      listLoading: true,
      options: [],
      value: "",
      tableData: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.total = response.total;
        this.tableData = response.data.data;
        this.options = response.data.category;
        this.listLoading = false;
      });
    },
    // 分类请求
    async changeCategory() {
      let params = {
        category_id: this.form.category_id,
        page: this.form.page,
        page_size: 20,
        book: this.form.book,
        sort: "",
      };
      let list = await getList(params);
      this.tableData = list.data.data;
      this.total = list.total;
    },
    // 删除请求
    async delete() {
      let file_id = this.file_id;
      let del = await delList(file_id);
      if (del.code == 1) {
        this.$message({
          type: "success",
          message: del.message,
        });
      } else {
        this.$message({
          type: "info",
          message: del.message,
        });
      }
      this.changeCategory();
    },
    // 保存新增请求
    async saveData(){
      let data=this.formData
      let res=await addForm(data)
       if (res.code == 1) {
        this.$message({
          type: "success",
          message: res.message,
        });
          this.fetchData();
       this.dialogFormVisible = false
      } else {
        this.$message({
          type: "info",
          message: res.message,
        });
      }
    },
    // 保存编辑请求
     async saveDataEditor(){
       this.formData.file_id=this.id
      let data=this.formData
      let res=await addFormEditor(data,this.id)
       if (res.code == 1) {
        this.$message({
          type: "success",
          message: res.message,
        });
          this.fetchData();
       this.dialogFormVisible = false
      } else {
        this.$message({
          type: "info",
          message: res.message,
        });
      }
    },
    // 获取编辑请求
    async editorData(){
      let id=this.id
      let res=await editorForm(id)
       if (res.code == 1) {
        this.$message({
          type: "success",
          message: res.message,
        });
       this.formData=res.data
      } else {
        this.$message({
          type: "info",
          message: res.message,
        });
      }
    },
    // 搜索
    searchBooks() {
      (this.form.page = 1), (this.form.book = this.search);
      this.changeCategory();
    },
    // 添加图书
    addBooks() {
         setTimeout(() => {
         this.$nextTick(function(){
         this.$refs.addData.$refs.formSave.clearValidate()
      })
      }, 50);
      this.dialogFormVisible = true;
       this.title="添加图书信息"
      this.formData={}
      setTimeout(() => {
        this.$refs.addData.fileList1=[]
         this.$refs.addData.fileList2=[]
      }, 50);
    },
    // 编辑
    editor(row) {
      this.id=row.file_id
      this.dialogFormVisible = true;
      this.title="编辑图书信息";
      this.editorData()
       setTimeout(() => {
        this.$refs.addData.fileList1=[]
         this.$refs.addData.fileList2=[]
      }, 50);
    },
    // 删除
    del(row) {
      this.file_id = row.file_id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delete();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    currentPage(val) {
      this.form.page = val;
      this.changeCategory();
    },
    // 保存数据
    save(){
      this.$refs.addData.validataForm()
    }

  },
};
</script>
<style>
.library-row {
  padding: 15px 0;
}

.add {
  display: flex;
  justify-content: flex-end;
}
.el-dialog__body {
  border: 1px solid #ddd;
}
.total {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
</style>